<!--
 * @Description: 
 * @Author: 阳婷
 * @Date: 2021-03-19 11:15:53
 * @LastEditTime: 2023-07-03 14:26:52
 * @LastEditors: 阳婷
-->
<template>
    <div class="tabPane">
        <div>
            <ul class="infoBox">
                <li class="leftValue">订单状态</li>
                <li class="rightValue">
                    {{form.order_status_name}}
                    <!-- <el-select style="width:100px" v-model="form.order_status" size="small" filterable
                        placeholder="订单状态">
                        <el-option v-for="item in orderStatus" :key="item.key" :label="item.value" :value="item.key">
                        </el-option>
                    </el-select> -->
                </li>
            </ul>
            <ul class="infoBox">
                <li class="leftValue">订单编号</li>
                <li class="rightValue">
                    <span>{{form.order_no}}</span>
                </li>
            </ul>
            <ul class="infoBox">
                <li class="leftValue">订单时间</li>
                <li class="rightValue">
                    <span>{{form.created_at}}</span>
                </li>
            </ul>
            <ul class="infoBox">
                <li class="leftValue">派送序号</li>
                <li class="rightValue">
                    <span>{{form.mealNumber}}</span>
                </li>
            </ul>
            <ul class="infoBox">
                <li class="leftValue">商品总数</li>
                <li class="rightValue">
                    <span>{{form.total_amount}}件</span>
                </li>
            </ul>
            <ul class="infoBox">
                <li class="leftValue">总金额</li>
                <li class="rightValue">
                    <span class="priceColor">{{form.price}} 元</span>
                </li>
            </ul>
             <ul class="infoBox" v-show="form.paid_at">
                <li class="leftValue">支付时间</li>
                <li class="rightValue">
                    <span>{{form.paid_at}}</span>
                </li>
            </ul>
        </div>
         <el-table border style="width: 100%;margin-top:20px;" :data="productList">
            <el-table-column prop="product_name" label="商品名称"></el-table-column>
            <el-table-column prop="amount" label="商品数量"></el-table-column>
            <el-table-column prop="price" label="单价">
                 <template #default="scope">
                     {{scope.row.price}}<span v-show="scope.row.unit"> /{{scope.row.unit}}</span>
                 </template>
            </el-table-column>
             <el-table-column prop="totalPrice" label="总价">
                 <template #default="scope">
                     {{scope.row.totalPrice}} 元
                 </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- <div class="footerBtn">
        <el-button @click="onSubmit" type="primary" size="small">保存</el-button>
    </div> -->

</template>
<script>
    import {
        deepCopy,
        isEmptyObject
    } from "@/utils/index"
    export default {
        props: ["rowData", "roomList"],
        data() {
            return {
                form: {
                    id: ''
                },
                product_num: 1,
                productList: [],
                orderStatus:[{
                    key:1,
                    value:"未派送"
                    },{
                    key:2,
                    value:"派送中"
                    },{
                    key:3,
                    value:"已完成"
                    }]
            }
        },
        watch: {
            rowData() {
                this.clearData();
                if (!isEmptyObject(this.rowData)) {
                    this.form = deepCopy(this.rowData);
                    this.productList = deepCopy(this.rowData).productList
                }
            }
        },
        mounted() {
            this.clearData();
            if (!isEmptyObject(this.rowData)) {
                this.form = deepCopy(this.rowData);
                this.productList = deepCopy(this.rowData).productList
            }
        },
        methods: {
            //减少商品数量
            removeNum(val) {
                var isExist = -1
                for (var i = 0; i < this.productList.length; i++) {
                    if (this.productList[i].id == val.id) { //购物车里有商品时
                        isExist = i
                    }
                }
                if (isExist != -1) { //购物车里有商品时
                    if (this.productList[isExist].amount > 1) {
                        var data = this.productList[isExist]
                        data.amount = --data.amount
                        this.productList.splice(isExist, 1, data)
                    } else {
                        var data = this.productList[isExist]
                        data.amount = 0
                        this.productList.splice(isExist, 1, data)
                    }
                }
            },
            //增加商品数量
            addNum(val) {
                var isAdd = -1
                for (var i = 0; i < this.productList.length; i++) {
                    if (this.productList[i].id == val.id) {
                        isAdd = i
                    }
                }
                if (isAdd == -1) { //购物车没有商品，添加进来
                    // var proObj = val
                    // var key = "count"
                    // var value = 1
                    // proObj[key] = value
                    // this.chooseProduct.push(proObj)
                } else { //购物车有商品，增加一个
                    var data = this.productList[isAdd]
                    data.amount = ++data.amount
                    this.productList.splice(isAdd, 1, data)
                    // this.chooseProduct.push(data)
                }
            },
            countPrice() {
                var totalPrice = 0
                for (var i = 0; i < this.productList.length; i++) {
                    if (this.productList[i].price != 0 && this.productList[i].count != 0) {
                        totalPrice = totalPrice + this.productList[i].count * this.productList[i].price
                    }
                }
                this.form.price = totalPrice
            },
            onSubmit() {
                if (this.form.id) {
                    this.update()
                } else {
                    this.add()
                }
            },
            add() {
                this.$ajax("post", "/api/order", this.form, data => {
                    if (data.code == 200) {
                        this.clearData();
                        this.$parent.$parent.$parent.show = false
                        this.$parent.$parent.$parent.getData()
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            update() {
                this.$ajax("put", "/api/order/" + this.form.id, this.form, data => {
                    if (data.code == 200) {
                        this.clearData()
                        this.$parent.$parent.$parent.show = false
                        this.$parent.$parent.$parent.getData()
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            clearData() {
                this.form = {
                    id: ''
                }
            }
        }
    }
</script>
<style scoped>
    .tabPane {
        padding: 5px 20px 15px 20px;
        margin-bottom: 0 !important;
    }

    .infoBox {
        width: 48%;
        display: inline-block;
        margin: 3px 0;
    }

    .infoBox li {
        display: inline-block;
    }

    .infoBox .leftValue {
        text-align: right;
           width: 36%;
           padding: 10px 10px 10px 0;
    }

    .infoBox .rightValue {
        text-align: left;
           width: 64%;
           height: 40px;
           vertical-align: middle;
           background-color: #f0f0f0;
           padding: 11px 0 10px 10px;
           white-space:nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
    }

    .productBox {
        color: #666;
    }

    .productCon {
        width: 216px;
        height: 293px;
        display: inline-block;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
        margin: 10px;
        vertical-align: top;
        border-radius: 10px;
    }

    .productImg {
        width: 100%;
        height: calc(100% - 75px);
        margin-bottom: 5px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .productLeft {
        width: 57%;
        display: inline-block;
        padding-left: 10px;
        overflow: hidden;
        white-space: nowrap;
        margin-right: 2%;
    }

    .productRight {
        width: 37%;
        display: inline-block;
        text-align: right;
        padding-right: 10px;
        font-size: 18px;
        overflow: hidden;
        margin-right: 2%;
    }

    .operateBox {
        text-align: center;
        padding-top: 5px;
    }

    .operateImg {
        width: 30px;
        height: 30px;
        cursor: pointer;
    }

    .operateNum {
        vertical-align: top;
        line-height: 30px;
        width: 40px;
        display: inline-block;
        text-align: center;
        font-size: 16px;
        color: #666;
    }

    .priceColor {
        color: #f67a26;
    }

    /* 图标颜色color:f67a26   bfbfbf*/
</style>